<template>
  <!-- 登录表单 -->
  <el-form @submit.native.prevent="login" class="login-form">
    <h2 class="login-title">登录</h2>
    <!-- 用户名输入框 -->
    <el-form-item>
      <el-input v-model="username" placeholder="用户名"></el-input>
    </el-form-item>
    <!-- 密码输入框 -->
    <el-form-item>
      <el-input type="password" v-model="password" placeholder="密码"></el-input>
    </el-form-item>
    <!-- 登录按钮 -->
    <el-form-item>
      <el-button type="success" plain native-type="submit" class="login-button">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名
      password: '' // 密码
    };
  },
  methods: {
    login() {
      // 验证用户
      const validUsers = {
        admin: { password: '123456', role: 'admin' },
        staff: { password: '123456', role: 'staff' }
      };

      // 获取用户信息
      const user = validUsers[this.username];

      // 验证用户名和密码
      if (user && user.password === this.password) {
        const userInfo = { username: this.username, role: user.role, token: 'fake-jwt-token' };
        // 登录成功，分发登录动作
        this.$store.dispatch('login', userInfo);
        // 跳转到仪表盘页面
        this.$router.push('/dashboard');
      } else {
        // 登录失败，提示错误信息
        this.$message.error('账号错误或者密码错误');
      }
    }
  }
};
</script>

<style>
.login-form {
  max-width: 300px;
  margin: 100px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.6)!important; /* 半透明背景颜色 */
}

.login-title {
  color:#017d7d;
  font-family: 'Lobster', cursive;
  font-size: 2em; /* 调整字体大小 */
  text-align: center; /* 居中对齐 */
  margin-bottom: 20px; /* 底部边距 */
}

.login-button {
  width: 100%;
}
</style>
